﻿<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    @close=" () => { this.visible = false }">
    <a-tabs :active-key="active" @change="callback">
      <a-tab-pane key="1">
        <span slot="tab"><a-icon type="user" />客户信息</span>
        <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="客户编码" prop="cCusCode">
                <a-input disabled v-model="entity.cCusCode" autocomplete="off" placeholder="客户编码"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户名称" prop="cCusName">
                <a-input disabled v-model="entity.cCusName" autocomplete="off" placeholder="客户名称"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户简称" prop="cCusAbbName">
                <a-input disabled v-model="entity.cCusAbbName" autocomplete="off" placeholder="客户简称"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="公司正式名称" prop="ONOfCompany">
                <a-input disabled v-model="entity.ONOfCompany" autocomplete="off" placeholder="公司正式名称"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="行业分类 " prop="cTrade">
                <a-input disabled v-model="entity.cTrade" autocomplete="off" placeholder="行业分类 "/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="销售性质" prop="cTrade">
                <a-select disabled v-model="entity.SaleType" style="width: 100%" placeholder="销售性质">
                  <a-select-option v-for="item in SaleType" :key="item.Id" :value="item.DicName">
                    {{ item.DicName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="上级单位" prop="ParentId">
                <CustRemoteSearchByCondition
                  v-model="entity.ParentId"
                  :disabled="true"
                  :is-my-data="false"
                  mode="default"
                  placeholder="检索客户(名称/编号)(省市区名称禁止查询)"
                  @BindCustomer="BindCustomer">
                </CustRemoteSearchByCondition>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户类型" prop="cCusType">
                <a-select disabled v-model="entity.cCusType" placeholder="客户类型">
                  <a-select-option :value="0"> 潜在客户</a-select-option>
                  <a-select-option :value="1"> 正式客户</a-select-option>
                  <a-select-option :value="2"> 休眠客户</a-select-option>
                  <a-select-option :value="3"> 待转正</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="客户来源" prop="CustomerOrigin">
                <a-input disabled v-model="entity.CustomerOrigin" autocomplete="off" placeholder="客户来源"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="省/直辖市" prop="cProvince">
                <a-select
                  disabled
                  v-model="entity.cProvince"
                  default-value="省/直辖市"
                  style="width: 100%"
                  @change="city($event)">
                  <a-select-option v-for="(item) in list" :key="item.Id" :value="item.Id">
                    {{ item.Name }}
                  </a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="市" prop="cCity">
                <a-select
                  disabled
                  v-model="entity.cCity"
                  default-value="市"
                  style="width: 100%"
                  @change="village($event)">
                  <a-select-option v-for="(item) in listChildren" :key="item.Id" :value="item.Id">
                    {{ item.Name }}
                  </a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="区县" prop="cCounty">
                <a-select disabled v-model="entity.cCounty" default-value="选择县级" style="width: 100%">
                  <a-select-option v-for="(item) in county" :key="item.Id" :value="item.Id">
                    {{ item.Name }}
                  </a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="银行账号" prop="cCusAccount">
                <a-input disabled v-model="entity.cCusAccount" autocomplete="off"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="开户银行" prop="cCusBank">
                <a-input disabled v-model="entity.cCusBank" autocomplete="off" placeholder="开户银行"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="应收余额">
                <a-input disabled v-model="entity.iARMoney" autocomplete="off" placeholder="应收余额"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="法人" prop="cCusLPerson">
                <a-input disabled v-model="entity.cCusLPerson" autocomplete="off" placeholder="法人"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="营业执照 " prop="cCusRegCode">
                <a-input disabled v-model="entity.cCusRegCode" autocomplete="off" placeholder="营业执照号码/手机号"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="余额初始日期 ">
                <a-date-picker disabled format="YYYY-MM-DD" style="width: 100%" v-model="entity.dLastDate"/>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="手机号" prop="cCusPhone">
                <a-input disabled v-model="entity.cCusPhone" autocomplete="off" placeholder="手机号"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="开票要求" prop="IRInfo">
                <a-textarea disabled :auto-size="{ minRows: 5 }" v-model="entity.IRInfo" autocomplete="off"/>
                <!-- <a-input disabled v-model="entity.IRInfo" autocomplete="off" placeholder="开票要求" /> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="地址" prop="cCusAddress">
                <a-textarea :auto-size="{ minRows: 5 }" disabled v-model="entity.cCusAddress" autocomplete="off"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.orders')" key="2">
        <span slot="tab"><a-icon type="safety" />订单信息</span>
        <Tsrecord ref="Tsrecord" :cid="Id.cCusCode"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.address')" key="3">
        <span slot="tab"><a-icon type="environment" />客户地址</span>
        <a-card :bordered="false">
          <div class="table-operator">
            <a-button type="primary" class="bookstyle" icon="plus" @click="AddressBook()">新建</a-button>
            <a-button type="primary" icon="redo" @click="BookgetDataList()">刷新</a-button>
          </div>
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="10">
                <a-col :md="4" :sm="24">
                  <a-form-item label="查询类别">
                    <a-select allowClear v-model="booksqueryParam.condition">
                      <a-select-option key="Addressee">收件人</a-select-option>
                      <a-select-option key="TelNumber">联系电话</a-select-option>
                      <a-select-option key="Address">收件地址</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item>
                    <a-input v-model="booksqueryParam.keyword" placeholder="关键字"/>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                  <a-button
                    type="primary"
                    @click="
                      () => {
                        this.BookgetDataList()
                      }
                    "
                  >查询
                  </a-button
                  >
                  <a-button
                    style="margin-left: 8px"
                    @click="
                      () => {
                        this.booksqueryParam = {}
                        this.BookgetDataList()
                      }
                    "
                  >重置
                  </a-button
                  >
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-table
            ref="table"
            :scroll="{ y: 530 }"
            :columns="Bookcolumns"
            :rowKey="(row, index) => row.Id"
            :dataSource="Bookdata"
            :pagination="false"
            :loading="loading"
            :bordered="true"
            size="small"
          >
            <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="EditBook(record.Id)">编辑</a>
                <a-divider type="vertical"/>
                <a v-if="hasPerm('Cust_AddressBook.Delete')" @click="handleDelete([record.Id])">删除</a>
              </template>
            </span>
          </a-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.contacts')" key="4" >
        <span slot="tab"><a-icon type="solution" />联系人</span>
        <CustomerLinkMan ref="LinkMan" :record="Id"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.user')" key="5">
        <span slot="tab"><a-icon type="bars" />人员分配</span>
        <PersonnelAllotment ref="Allotment" :Uid="Id.Id"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.goutong')" key="6">
        <span slot="tab"><a-icon type="message" />沟通记录</span>
        <CommunicationRecord ref="Record" :cusId="Id.Id"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.shipments')" key="7">
        <span slot="tab"><a-icon type="car" />发货信息</span>
        <Shipping ref="Shipping" :Cid="Id.cCusCode"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.Billing')" key="8">
        <span slot="tab"><a-icon type="file-protect" />发票信息</span>
        <Invoicing ref="Invoicing" :cCusCode="Id.cCusCode"/>
      </a-tab-pane>
      <a-tab-pane v-if="flag&&hasPerm('Cust_CustomerApply.Sample')" key="9">
        <span slot="tab"><a-icon type="gift" />样品信息</span>
        <MySample ref="MySample" :name="Id.cCusName"/>
      </a-tab-pane>
    </a-tabs>
    <BookeditForm :parentObj="this" ref="BookeditForm"/>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
    </div>
  </a-drawer>
</template>

<script>
import CommunicationRecord from './CommunicationRecord.vue'
import BookeditForm from './BookEditForm.vue'
import Tsrecord from './Tsrecord.vue' // 订单信息
import Shipping from './Shipping.vue' // 发货信息
import Invoicing from './Invoicing.vue' // 开票信息
import MySample from '../MyCustomer/Information/MySample.vue' // 开票信息
import PersonnelAllotment from './PersonnelAllotment.vue' // 人员分配
import CustomerLinkMan from '../Cust_CustomerLinkMan/ListToo.vue'
import CustRemoteSearchByCondition from '@/components/RemoteSearch/CustRemoteSearchByCondition'
import moment from 'moment'

const columns = [
  { title: '客户编码', dataIndex: 'cCusCode', width: '10%' },
  { title: '客户名称', dataIndex: 'cCusName', align: 'left', width: '17%' },
  { title: '客户简称', dataIndex: 'cCusAbbName' },
  { title: '电话 ', dataIndex: 'cCusPhone' },
  { title: '开户银行', dataIndex: 'cCusBank', align: 'left', width: '13%', ellipsis: true },
  { title: '地址', dataIndex: 'cCusAddress', ellipsis: true },
  { title: '联系人', dataIndex: 'cCusPerson', width: '5%' }
  // { title: '客户来源', dataIndex: 'CustomerOrigin' },
]

const Bookcolumns = [
  { title: '收件人', dataIndex: 'Addressee' },
  { title: '联系电话', dataIndex: 'TelNumber' },
  { title: '收件地址', dataIndex: 'Address' },
  { title: '备注', dataIndex: 'Remark' },
  { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' }, width: '150px' }
]
export default {
  props: {
    parentObj: Object
  },
  components: {
    CustRemoteSearchByCondition,
    BookeditForm,
    CustomerLinkMan,
    Tsrecord,
    CommunicationRecord,
    Shipping,
    Invoicing,
    PersonnelAllotment,
    MySample
  },
  data () {
    return {
      User: [],
      SaleType: [],
      columns,
      data: [],
      DepartmentIdTreeData: [],
      show: false,
      targetKeys: [],
      mockData: [],
      Id: {},
      flag: false,
      SalesmanId: '',
      Bookcolumns,
      DepartmentId: '',
      Bookdata: [],
      booksqueryParam: {},
      active: '1',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      list: [], // 省级
      listChildren: [], // 市
      county: [], // 县
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: ''
    }
  },
  mounted () {
    this.getlist()
    // this.getAllocationList()
    this.getSelsct()
  },
  methods: {
    handleDelete (ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk () {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/CustomerManagement/Cust_AddressBook/DeleteData', ids).then(resJson => {
              resolve()
              if (resJson.Success) {
                thisObj.$message.success('操作成功!')
                thisObj.BookgetDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        }
      })
    },
    getSelsct () {
      this.$http
        .post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
          Condition: 'DicKey',
          Keyword: 'SaleType'
        })
        .then(res => {
          this.SaleType = res.Data.DictionaryDetailsList
        })
    },
    callback (key) {
      this.active = key
      const compRef = {
        2: 'Tsrecord',
        7: 'Shipping',
        8: 'Invoicing'
      }
      if (this.active == 3) {
        this.BookgetDataList()
      }
      if (this.active == 4 && this.$refs.LinkMan) {
        this.$refs.LinkMan.getDataList()
      }
      if (this.active == 5 && this.$refs.Allotment) {
        this.$refs.Allotment.getDataList()
      }
      if (this.active == 6 && this.$refs.Record) {
        this.$refs.Record.getDataList()
      }
      if (this.active == 9 && this.$refs.MySample) {
        this.$refs.MySample.getDataList()
      }
      if (this.$refs[compRef[key]]) {
        this.$refs[compRef[key]].repossess()
      }
    },
    BindCustomer (val) {
      this.$set(this.entity, 'ParentName', val == null ? null : val.cCusName)
      this.$set(this.entity, 'ParentId', val == null ? null : val.Id)
    },
    // 地址
    BookgetDataList () {
      let searchArr = []
      if (this.booksqueryParam.condition && this.booksqueryParam.keyword) {
        searchArr = [
          {
            Condition: 'CustomerId',
            Keyword: this.Id.Id
          },
          {
            Condition: this.booksqueryParam.condition,
            Keyword: this.booksqueryParam.keyword
          }
        ]
      } else {
        searchArr = [
          {
            Condition: 'CustomerId',
            Keyword: this.Id.Id
          }
        ]
      }
      this.loading = true
      this.$http
        .post('/CustomerManagement/Cust_AddressBook/GetDataListByMoreCondition', {
          PageIndex: 1,
          PageRows: 99,
          SortField: 'CustomerId',
          SortType: 'desc',
          Search: searchArr,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.Bookdata = resJson.Data
        })
    },
    AddressBook () {
      this.$refs.BookeditForm.openForm(null, '新建客户地址簿信息', this.Id.Id)
    },
    EditBook (id) {
      this.$refs.BookeditForm.openForm(id, '编辑客户地址簿信息')
    },
    filterOption (inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    Department (e) {
      this.UserList(e)
    },
    UserList (e) {
      this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
        if (resJson.Success) {
          this.User = resJson.Data
        }
      })
    },
    init () {
      this.active = '1'
      this.visible = true
      this.show = false
      this.entity = {}
      this.mockData = []
      this.targetKeys = []
      this.Bookdata = []
    },
    openForm (row, title, flag, jiansuo) {
      this.init()
      this.active = '1'
      this.flag = flag
      if (flag) {
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      }
      this.title = title
      if (row) {
        this.Id = row
        this.loading = true
        this.$http.post('/CustomerManagement/CustomerInfo/GetTheData', { id: row.Id }).then(resJson => {
          this.loading = false
          this.entity = resJson.Data
          this.city(this.entity.cProvince)
          this.village(this.entity.cCity)
          if (this.entity['dCusDevDate']) {
            this.entity['dCusDevDate'] = moment(this.entity['dCusDevDate'])
          }
          if (this.entity['dLastDate']) {
            this.entity['dLastDate'] = moment(this.entity['dLastDate'])
          }
        })
      }
    },
    close () {
      this.visible = false

      this.entity = {}
    },
    // 市级change
    city (e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        this.loading = false
        this.listChildren = resJson.Data
      })
    },

    // 县change
    village (e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        this.loading = false

        this.county = resJson.Data
      })
    },
    // 获取省份信息
    getlist (e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then(resJson => {
        this.loading = false
        this.list = resJson.Data

        // this.getlistUser()
      })
    },
  }
}
</script>

<style scoped>
.bookstyle {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
